<template>
    <div id="home">
         <!--顶部(头部，搜索部分)-->
        <div id="head">            
            <div id="headTop"><!--头部-->              
                <div id="headTop_left">
                    <a href=""></a>
                    <a href="">南京市</a>
                    <a href=""></a>
                </div>
                <div id="headTop_right">
                    <a href=""></a>
                </div>
            </div>
            <div id="search"><!--搜索部分-->
                <input type="text">
                <p>
                    <span></span>
                    <span>牛奶</span>
                </p>
            </div>
            <div id="head_bottom"><!--底部部分-->
                <a href="">酸奶</a>
                <a href="">黄花菜</a>
                <a href="">卫生经</a>
                <a href="">方便面</a>
                <a href="">牙膏</a>
                <a href="">巧克力</a>
                <a href="">奶粉</a>
            </div>
        </div>
        <!--大图片-->
        <div id="bigImage">
            <a href=""></a> 
        </div>
        <!--导航部分-->
        <div id="navigation">
            <ul>
                <li v-for='ctgs in ctgs' :key='ctgs.id'>
                    <img :src="imgURL+ctgs.idcnUrl" alt="">
                    <p>{{ctgs.text}}</p>
                    <p>{{ctgs.tip}}</p>
                </li>
            </ul>
        </div>
        <div id="blank"></div>
        <!--轮播图部分-->
        <div id="slideshow">
            <el-carousel trigger="click" id="slideshowImg" height="0" arrow="never" indicator-position="none">
            <el-carousel-item v-for="item in imgs" :key="item.id" id="slideshowImg" :interval="7000" name="setActiveItem">
                 <img :src="imgURL+item.thumb" alt="">
            </el-carousel-item>
            </el-carousel>
        </div>
        <div id="blank"></div>
        <!--两张图片-->
        <div id="imgTwo">
            <div id="imgTwoBox">
                <a href="">
                    <img src="../image/home/28e9b97633a428cd.png" alt="">
                </a>
                <a href="">
                    <img src="../image/home/8614f1f6629fd4c7.png" alt="">
                </a>
            </div>
        </div>
        <div id="kb"></div>
        <!--四张图片-->
        <div id="imgfour">
            <div id="imgfourBox">
                <a href="">
                    <span id="first">思恋水饺</span>
                    <span id="last">满40减30</span>
                    <img src="../image/home/70ff8022efea4065.png" alt="">
                </a>
            </div>
            <div id="imgfourBox">
                <a href="">
                    <span id="first">益丰药房</span>
                    <span id="last">满49减20</span>
                    <img src="../image/home/cda4d7560b7c7806.jpg" alt="">
                </a>
            </div>
           <div id="imgfourBox">
                <a href="">
                    <span id="first">满49减15</span>
                    <span id="last">车厘子疯抢</span>
                    <img src="../image/home/502900b49537f5b2.png" alt="">
                </a>
            </div>
            <div id="imgfourBox">
                <a href="">
                    <span id="first">龙眼3.9</span>
                    <span id="last">满49减30</span>
                    <img src="../image/home/fe05b0562df26c42.jpg" alt="">
                </a>
            </div>
        </div>
        <div id="blank"></div>
        <!--秒杀限时抢购-->
        <div id="seckill">
            <img src="../image/home/seckill-title.png" alt="">
            <a href="">更多
                <img src="../image/home/seckill-right.png" alt="">
            </a>
        </div>
        <!--图片鼠标拖动部分-->
        <div id="drag">
            <a href="">
                <p>
                    <img src="../image/home/5bfcbee7N5548c5a0.png" alt="">
                    <span>永辉超市-茂业天地店</span>
                </p>
                <p>￥ 3.5</p>
                <p>￥ 6</p>
            </a>
            <a href="">
                <p>
                    <img src="../image/home/122b106693a12e78.jpg" alt="">
                    <span>沃尔玛-新街口店</span>
                </p>
                <p>￥ 9.96</p>
                <p>￥ 13.4</p>
            </a>
            <a href="">
                <p>
                    <img src="../image/home/5c0487f6N9edde936.png" alt="">
                    <span>永辉超市-茂业天地店</span>
                </p>
                <p>￥ 5.99</p>
                <p>￥ 10.2</p>
            </a>
            <a href="">
                <p>
                    <img src="../image/home/5c009c8cN0906bef0.jpg" alt="">
                    <span>华润苏果-文昌巷社区店</span>
                </p>
                <p>￥ 16.5</p>
                <p>￥ 20</p>
            </a>
        </div>
        <div id="kb1"></div>
        <!--大图片部分-->
        <div class="swiper-container" id="imgBig1">
            <div class="swiper-wrapper" id="imgs">
                <div class="swiper-slide" id="img1">
                    <img src="../image/home/e155445f2a193a69.jpg" alt="">
                </div>
                <div class="swiper-slide" id="img2">
                    <img src="../image/home/39f87ce82465591c.jpg" alt="">
                </div>
                <div class="swiper-slide" id="img3">
                    <img src="../image/home/fa54e4ea6c8a10fc.png" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!--附近的店铺-->
        <div id="stores">
            <span>附近的店铺</span>
        </div>
        <!--店铺-->
        <div id="seller" v-infinite-scroll="loadmore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
            <ul id="sellers">
                <li id="ordinary" v-for="shop in shops" :key="shop.id">
                    <div id="sellersLeft"><!--左边图片-->
                        <img :src="imgURL+shop.thumb" alt=""> 
                    </div>
                    <div id="sellersReft"><!--右边的大盒子-->
                        <a href="">
                            <div id="sellersReft1"><!--第一层店铺名称-->
                                <p>
                                    <router-link :to="{
                                        name:'shop',
                                        params:{
                                            shop_id:shop.id,
                                        }}" 
                                        id="p">{{shop.title}}
                                    </router-link>
                                </p>
                                <span></span>
                            </div>
                            <div id="sellersReft2"><!--第二层星级和路程-->
                                <p id="sellersReft2L"><!--星级-->
                                    <span id="star">
                                        <i></i>
                                        <i></i>
                                        <i></i>
                                        <i></i>
                                        <i></i>
                                    </span>
                                    <span id="star1">{{shop.aqs}}</span>
                                </p>
                                <p id="sellersReft2C">{{shop.sales}}</p>
                                <p id="sellersReft2R">
                                    <span>{{shop.time}}</span>
                                    <span></span>
                                    <span>{{shop.distance}}</span>
                                </p>   
                            </div>
                            <div id="sellersReft3"><!--第三层运送费-->
                                <span id="fee1">{{shop.price}}<i></i>{{shop.freight}}</span>                               
                                <span id="fee2">{{shop.courier}}</span>
                            </div>
                            <div id="sellersReft4"><!--第四层券和满减-->
                               <ul>
                                   <li>
                                       <span>{{shop.tips1.tag}}</span>
                                       <span>{{shop.tips1.text}}</span>
                                   </li>
                                   <li>
                                       <span id="fullR">{{shop.tips2.tag}}</span>
                                       <span>{{shop.tips2.text}}</span>
                                   </li>
                               </ul>
                               <p>
                                   <img src="../image/home/icon_arrow_down.png" alt="">
                               </p>
                            </div>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
        <!--彭于晏新用户优惠券-->
        <div id="newUser">
            <a href=""></a>
        </div>
        <!--<AppFooter></AppFooter>-->
        <Navs active="iocn-nav1" active1="iocn-nav1"></Navs>
    </div>
</template>
<script>
    import $ from 'jquery';
    import infiniteScroll from 'vue-infinite-scroll'; 
    import Swiper from 'swiper';
    export default {
        directives: {infiniteScroll},
        data(){
            return {
                ctgs:[],
                shops:[],
                busy:false,
                imgs:[],
            }
        },
        created(){
            this.getCtgs();
            this.getShops();
            this.getImgs();
        },
        methods:{
            getImgs(){
                this.axios.get('/imgs').then((ret)=>{
                    let{data,error}=ret.data
                    this.imgs=data
                }).catch()
            },
            loadmore(){
                this.getShops()
                console.log('loadmore')
            },
            getShops(){
                this.busy=true,
                this.axios.get('/shops').then((ret)=>{
                    //console.dir(ret)
                    let {data,error}=ret.data
                    this.shops=this.shops.concat(data)
                    this.busy=false;
                })
            },
             getCtgs(){
                this.axios.get('/ctgs').then((ret)=>{
                    let {data,error}=ret.data
                    this.ctgs=data
                })
            },            
        },
        mounted(){
            new Swiper ('.swiper-container', {
                loop: true,
                autoplay: true,
                initialSlide :0,
                observer:true,
                pagination:'.swiper-pagination',
                uniqueNavElements :false,
                autoplayDisableOnInteraction : false,
            })
        }
    }
    //顶部
    $(window).scroll(function(){
        //console.log($(this).scrollTop()/82);
        var sv=$(this).scrollTop()/184;
        $('#head').css('backgroundColor','rgba(44, 214, 95,'+(1-sv)+')');
        $('#headTop').css('backgroundColor','rgba(44, 214, 95,'+sv+')');
    })
</script>
<style scoped lang="scss">
//http://localhost:8080/#/home
//主页
*{
    margin:0;
    padding:0;
    list-style-type:none;
    text-decoration:none;
}
#home{
    width:100%;

//顶部(头部，搜索部分，底部部分)
    #head{
        width:100%;
        height:220px;
        position:relative;
        //z-index:1000;
        background-color: rgb(44, 214, 95);
        border-top:1px solid rgb(44, 214, 95);
        //头部
        #headTop{
            width:750px;
            height:88px;
            display:flex;
            justify-content:space-between;
            position:fixed;
            top:0;
            left:0;
            z-index:3;
            background-color:rgba(20, 224, 13,0);
            //头部左侧
            #headTop_left{
                width:136px;
                height:64px;
                margin-left:26px;
                margin-top:24px; 
                display:flex;
                justify-content:space-between;

                a:nth-of-type(1){
                    display:block;
                    width:28px;
                    height:34px;
                    margin-top:5px;                  
                    background-image:url(../image/home/headTop_left.png);
                    background-repeat:no-repeat;
                    background-size:100% 100%;                  
                }
                a:nth-of-type(2){
                    color:#fff;
                    font-size:32px;
                    text-decoration:none;
                    margin:0 0 0 4px; 
                }
                a:nth-of-type(3){
                    display:block;                    
                }
            }
            //头部右侧
            #headTop_right{
                width:60px;
                height:64px;

                a{
                    width:40px;
                    height:40px;
                    display:block;
                    background-image:url(../image/home/headTop_right.png);
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                    margin-top:24px;
                }
            }
        }
        //搜索部分
        #search{
            width:750px;
            height:68px;
            margin-top:10px;
            position:absolute;;
            top:90px;
            //搜索框
            input{
                width:712.5px;
                height:68px;
                display:block;
                margin:auto;
                padding:0;
                border:0;
                border-radius:68px;
            }
            
            //搜索框内的图片和文字
            p{
                width:110px;
                height:38px;
                position: absolute;
                top:0;
                left:330px;
                margin-top:16px;
                display:flex;
                //图片
                 span:nth-of-type(1){
                    display:block;
                    width:32px;
                    height:32px;
                    margin-right:6px;
                    background-image:url(../image/home/search.png);
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                 }
                 //文字
                 span:nth-of-type(2){
                     font-size:28px;
                     color:#999;                 
                 }
            }
        }
        //底部部分
        #head_bottom{
            width:95%;
            height:54px;
            margin:auto;
            display:flex;
            justify-content:center;
            position:absolute;
            top:165px;
            a{
                width:48px;
                height:54px;
                padding:0 16px;
                display:block;
                font-size:24px;
                color:#fff;
                text-decoration:none;
                line-height:54px;
                white-space:nowrap;
            }
            a:nth-of-type(2){
                width:72px;
                height:54px;
                
            }
            a:nth-of-type(3){
                width:73px;
                height:54px;
                
            }
            a:nth-of-type(4){
                width:73px;
                height:54px;
                
            }
            a:nth-of-type(6){
                width:73px;
                height:54px;
                
            }
        }
    }
//大图片
    #bigImage{
        width:100%;
        height:218px;

        a{
            display:block;
            width:750px;
            height:218px;
            background-image:url(../image/home/bigImage.jpg);
            text-decoration:none;
            background-repeat:no-repeat;
            background-size:100% 100%;
        }
    }
//导航部分
    #navigation{
        width:100%;
        height:308px;
        position: relative;      

        ul{
            width:750px;
            list-style-type:none;
            padding-left:0;
            margin:0;

            li{
                width:150px;
                height:124px;
                margin-top:30px;
                display:block;
                float:left;
                
                img{
                    display:block;
                    width:80px;
                    height:80px;
                    margin:0 auto 10px;
                }
                p:nth-of-type(1){
                    font-size:24px;
                    color:#222;
                    margin:auto;
                    text-align:center;
                    white-space:nowrap;
                    line-height:36px;
                }
                p:nth-of-type(2){
                    white-space:nowrap;
                    border-radius:50px;
                    position: absolute;
                    color:#fff;
                    text-align:center;
                    font-size:20px;
                    top:180px;                                      
                }
            }
            li:nth-of-type(9){
                p:nth-of-type(1){
                    width:96px;
                    height:36px;                    
                }
                p:nth-of-type(2){
                    width:72px;
                    height:24px;
                    padding: 2px;
                    border:1px solid #FF5757;                    
                    background-color:#FF5757;
                    left:500px;                                    
                }
            }
            li:nth-of-type(10){
                p:nth-of-type(1){
                    width:96px;
                    height:36px;
                }
                p:nth-of-type(2){
                    width:80px;
                    height:24px;
                    padding: 2px;
                    border:1px solid #FF5757;
                    background-color:#FF5757;
                    left:640px;
                }
            }
        }
    }
    #blank{
        width:100%;
        height:20px;
    }

//轮播图部分
    #slideshow{
        width:100%;
        height:190px;
        position:relative;

        #slideshowImg{
            width:710px;
            height:190px;
            margin:auto;
        
            .el-carousel__item img {
                width:710px;
                height:190px;
                position: absolute;
                z-index: -1;
                background-repeat:no-repeat;
                background-size:100% 100%;
                
            }       
        }
    }
     
    
//两张图片
    #imgTwo{
        width:100%;
        height:278px;

        #imgTwoBox{
            width:710px;
            height:258px;
            margin:10px auto;
            display:flex;
            justify-content:space-between;

            a{
                display:block;
                width:348px;
                height:258px;

                img{
                    display:block;
                    width:348px;
                    height:258px;  
                }
            }
        }
    }
//空白
    #kb{
        width:750px;
        height:5px;
    }
    #kb1{
        width:750px;
        height:10px;
    }
//四张图片
    #imgfour{
        width:710px;
        height:258px;
        padding:0 20px;
        display:flex;
        justify-content:space-between;
        white-space:nowrap;

        div{
            width:170px;
            height:246px;
            background-color: rgb(248, 248, 248);

            a{
                display:block;
                width:120px;
                height:246px;
                margin:auto;
                text-decoration:none;

               #first{
                    display:block;
                    width:120px;
                    height:38px;
                    margin-top:26px;
                    font-size:24px;
                    color:#222;
                    text-align:center;
                }
                #last{
                    display:block;
                    width:120px;
                    height:24px;
                    margin-top:10px;
                    font-size:22px;
                    text-align:center;
                    color:red;
                }
                img{
                    display:block;
                    width:120px;
                    height:120px;
                    margin-top:20px;
                }
            }
        }
    }
//秒杀限时抢购
    #seckill{
        width:710px;
        height:60px;
        padding:20px;
        display:flex;
        justify-content:space-between;
        //左边图片
        img{
            display:block;
            width:226px;
            height:46px;
            margin-top:10px;
        }
        //右边文字和右箭头
        a{
            display:block;
            width:68px;
            height:60px;
            text-decoration:none;
            color:#ff5757;
            font-size:24px;
            line-height:60px;
            display:flex;
            white-space:nowrap;
            //margin-right:20px;

            img{
                display:block;
                width:18px;
                height:22px;
                margin:18px 0 0 1px;
            }
        }
    }
//图片鼠标拖动部分
    #drag{
        width:750px;
        height:238px;
        margin:10px 0;
        display:flex;
        //单个包裹的盒子
        a{
            display:block;
            width:146px;
            height:222px;
            margin-left:20px;
            //图片
            p:nth-of-type(1){
                width:146px;
                height:146px;
                position: relative;

                img{
                    display:block;
                    width:146px;
                    height:146px;
                }
                span{
                    display:block;
                    width:146px;
                    height:26px;
                    line-height:26px;
                    position:absolute;
                    bottom:0px;
                    border-radius:10px;
                    background-color:rgba(255,87,87,0.6); 
                    font-size:24px;
                    text-align:center;
                    color:#fff;
                    white-space:nowrap;
                    text-overflow:ellipsis;overflow:hidden;
                }
            }
            //价格后
            p:nth-of-type(2){
                width:146px;
                height:44px;
                text-align:center;
                font-size:32px;
                color:red;
                line-height:44px;
            }
            //价格前
            p:nth-of-type(3){
               width:146px;
               height:32px;
               line-height:32px;
               text-align:center;
               color:#222;
               font-size:24px;
               text-decoration:line-through;
            }
        }
    }
//大图片部分
    #imgBig1{
      width:750px;
      height:190px;

      #imgs{
          width:710px;
          height:190px;
          margin:auto;
         
         div{
             img{
                 background-repeat:no-repeat;
                 width:710px;
                 
             }
         }
          
      }  
    }
//附近的店铺
    #stores{
        width:730px;
        height:56px;
        padding:60px 0 20px 20px;
        border-bottom:1px solid #ccc;

        span{
            width:200px;
            height:56px;
            display:block;
            font-size:36px;
            font-weight:600;
        }
    }
//店铺
    #seller{
       width:750px;
       white-space:nowrap; 

       #sellers{
           width:750px;
            //单个店铺大盒子
           li{
             width:710px;
             height:200px;
             padding:30px 20px;
             margin:auto;
             display:flex;             
             
            //单个店铺的左边
             #sellersLeft{
                 width:140px;
                 height:200px;

                //  a{
                //     display:block;
                //     width:140px;
                //     height:200px; 

                    img{
                        display:block;
                        width:124px;
                        height:124px;
                        padding-right:16px;
                    }
                //  }
             }
            //单个店铺的右边
             #sellersReft{
                 width:562px;
                 height:230px;
                 border-bottom:1px solid #ccc;

                 a{
                    width:562px;
                    height:200px;
                    display:block;
                    //店铺名称
                    #sellersReft1{
                        width:562px;
                        height:40px;
                        display:flex;

                        #p{
                            font-size:30px;
                            color:#222;
                            font-weight:bold;
                            width:522px;
                            height:40px;
                        }
                        span{
                            display:block;
                            width:36px;
                            height:40px;
                            padding-right:4px;
                            background-image:url(../image/home/5bee3729N8630ddda.png);
                            background-repeat:no-repeat;
                            background-size:100% 100%;
                            
                        }
                    }
                    //店铺星级和路程
                    #sellersReft2{
                        width:562px;
                        height:32px;
                        display:flex;
                        position: relative;
                        
                        //左边的星级
                        #sellersReft2L{
                            width:140px;
                            height:32px;
                            margin-top:10px;
                            display:flex;
                            
                            #star{
                                display:block;
                                width:100px;
                                height:24px;
                                display:flex;
                                i{
                                    width:20px;
                                    height:20px;
                                    display:block;
                                    background-image:url(../image/home/newStar.png);
                                    background-repeat:no-repeat;
                                    background-size:auto 20px;;
                                }
                            }
                            #star1{
                                width:34px;
                                height:20px;
                                padding-left:6px;
                                display:block;
                                color:#FFA14E;
                                line-height:20px;
                                font-size:24px;
                            }
                        }
                        //销售额
                        #sellersReft2C{
                            width:104px;
                            height:24px;
                            padding-left:6px;
                            font-size:24px;
                            color:#222;
                            margin-top:5px;
                        }
                        //路程
                        #sellersReft2R{
                            width:256px;
                            height:32px;
                            display:flex;
                            margin-top:5px;
                            position: absolute;
                            right:0;

                            span:nth-of-type(1){
                                display:block;
                                width:164px;
                                height:32px;
                                font-size:24px;
                                color:#666;
                                text-align:right;
                                white-space:nowrap;
                            }
                            span:nth-of-type(2){
                                display:block;
                                width:2px;
                                height:16px;
                                margin:0 10px;
                            }
                            span:nth-of-type(2):hover{
                                background-color:blue;
                            }
                            span:nth-of-type(3){
                                display:block;
                                width:70px;
                                height:32px;
                                font-size:24px;
                                color:#666;
                            }
                        }
                    }
                    //运送费
                    #sellersReft3{
                        width:562px;
                        height:32px;
                        margin-top:10px;
                        display:flex;

                        #fee1{
                            width:450px;
                            height:32px;
                            display:block;
                            font-size:24px;
                            color:#666;
                            display:flex;
                            
                            i{
                                display:block;
                                width:2px;
                                height:16px;
                                margin:0 10px;
                            }
                            i:hover{
                                background-color:blue;
                            }
                        }
                        #fee2{
                            width:112px;
                            height:28px;
                            display:block;
                            border:2px solid  #16a9ff;
                            border-radius:8px 2px;
                            font-size:24px;
                            color:#16a9ff;
                            text-align:center;
                            line-height:28px;
                            white-space:nowrap;
                        }
                    }
                    #sellersReft4{
                        width:562px;
                        height:76px;
                        display:flex;

                        ul{
                            width:506px;
                            height:66px;

                            li{
                                display:block;
                                width:506px;
                                height:28px;
                                padding:0;
                                display:flex;
                                margin-top:10px;

                                span:nth-of-type(1){
                                    display:block;
                                    width:48px;
                                    height:28px;
                                    padding:0 6px;
                                    margin-right:6px;
                                    font-size:24px;
                                    border-radius:8px 2px;
                                    background-color:rgb(252, 101, 101);
                                    color:#fff;
                                }
                                span:nth-of-type(2){
                                    display:block;
                                    width:404px;
                                    height:28px;
                                    font-size:24px;
                                    white-space:nowrap;
                                    text-overflow:ellipsis;
                                    overflow:hidden;
                                    color:#666;
                                }

                                #fullR{
                                     background-color:#55D85E;
                                }
                            }
                            
                        }
                        p{
                            width:78px;
                            height:74px;
                            padding-right:20px;
                            position: relative;
                            img{
                                display:block;
                                position: absolute;
                                right:0;
                                top:20px;
                                width:20px;
                                
                            }
                        }
                    }
                 }
             }
           }
       }
    }
//彭于晏新用户优惠券
    #newUser{
        width:750px;
        height:164px;
        position:fixed;
        z-index:100;
        bottom:100px;

        a{
            display:block;
            width:750px;
            height:164px;
            background-image:url(../image/home/download_2018_0408.png);
            background-repeat:no-repeat;
            background-size:100% 100%;
        }
    }  
} 
</style>


